<template>
  <a-tabs class="m-config-box" v-model="activeName" :animated="false">
    <a-tab-pane tab="数据配置" key="first">
      <SetData ref="configData"
        :type="type"
        :title="title"
        :subtitle="subtitle"
        :describe="describe"
        :data="data"
        :apiConfig="apiConfig"
        :dataType="dataType"
        @cell-selection="cellSelection"
        @data-change="dataChange"
        @input-change="inputChange"
        @api-change="apiChange"
      />
    </a-tab-pane>

    <a-tab-pane
      tab="显示配置"
      key="second"
      v-if="['number', 'trendNumber', 'multipleNumber'].indexOf(type) < 0"
    >
      <component :is="getComponent()" :config="config" @change="configChange" />

      <!-- 图例 -->
      <Legend v-if="config.legend !== undefined"
        :legend="config.legend"
        @change="configChange"
      />
    </a-tab-pane>
  </a-tabs>
</template>
<script>
  import { defineComponent } from 'vue';
  import SetData from './common/data.vue';
  import FoldBox from '../_source/foldBox.vue';
  import Legend from './common/legend.vue';
  import Line from './line.vue';
  import StepLine from './stepLine.vue';
  import Area from './area.vue';
  import Radar from './radar.vue';
  import Bar from './bar.vue';
  import Pie from './pie.vue';
  import Ring from './ring.vue';
  import Gauge from './gauge.vue';

  export default defineComponent({
    components: { SetData, FoldBox, Legend },
    props: {
      type: {
        type: String,
      },

      title: {
        type: String,
      },

      subtitle: {
        type: String,
      },

      describe: {
        type: String,
      },

      // 展示显示数据
      data: {
        type: Object,
        default: null,
      },

      // 数据源配置
      apiConfig: {
        type: Object,
      },

      // 展示模块配置
      config: {
        type: Object,
      },

      dataType: {
        type: Number,
      },
    },
    setup() {},
    data() {
      return {
        activeName: 'first',
      };
    },
    methods: {
      getComponent() {
        const map = {
          line: Line,
          stepLine: StepLine,
          area: Area,
          stackArea: Area,
          radar: Radar,
          bar: Bar,
          pie: Pie,
          ring: Ring,
          gauge: Gauge,
        };
        console.log(this.type);
        return map[this.type] || null;
      },

      dataChange(data) {
        this.$emit('data-change', data);
      },

      configChange(config) {
        this.$emit('config-change', Object.assign({}, this.config, config));
      },

      inputChange(input) {
        this.$emit('input-change', input);
      },

      apiChange (v) {
        this.$emit('api-change', v)
      },

      cellSelection (v) {
        this.$emit('cell-selection', v);
      }
    },
  });
</script>
<style lang="scss">
  .m-config-box {
    .el-collapse-item__header {
      height: 38px;
      line-height: 38px;
    }
    .el-collapse-item__content {
      padding-bottom: 10px;
    }
  }
</style>
